<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- 数据报告中的一卡通消费界面 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/top.css" />
<link rel="stylesheet" href="../../css/home.css" />
<script src="../../js/jquery.min.js"></script>
<script src="../../js/top.js"></script>
<script src="../../js/echarts.min.js"></script>
<script src="../../js/the-charts.js"></script>
<title>智行校园-精准化服务平台</title>
</head>
<body class="background">
<input type="hidden" value="数据报告"  />
	<div class="container">
		<ul class="charts_left">
			<li><a href="class_data_analyse.jsp">学分数据</a></li>
			<li><a href="score_data_analyse.jsp">成绩数据</a></li>
			<li class="selected"><a href="sign_data_analyse.jsp">点名数据</a></li>
			<li><a href="library_data_analyse.jsp">借阅数据</a></li>
			<li ><a href="cost_data_analyse.jsp">一卡通消费数据</a></li>
		</ul>
		<div class="charts_right">
			<h3 style="padding:0 0.5em 1em 0">点名数据</select></h3> 
			<div class="cost_pie" style="width:50%">
			    <h3 >我的点名情况</h3>
			     <select id="sign_lselect" style="width:calc(100% - 4em);max-width:21em"></select>
			    <div id="sign_lsign"></div>
			</div>
			<div class="cost_pie" style="width:50%">
			   <h3 >本周点名对比</h3>
			   <p></p>
			   <span class="blue_person"></span>
			   <span class="blue_person"></span>
			   <span class="blue_person"></span>
			   <span class="blue_person"></span>
			   <span class="blue_person"></span>
			   <span class="yellow_person"></span>
			   <span class="yellow_person"></span>
			   <span class="yellow_person"></span>
			   <span class="yellow_person"></span>
			   <span class="yellow_person"></span>
			</div>
			<div class="cost_pie" style="width:0%" id="week_course">
			   
			</div>
			<div class="charts_describe"></div>
		</div>
	</div>
	<form method="post"  name="userid_form" >
	    <input type="hidden" value="" name="userid" />
    </form>
	<script>
//  var user_id='<%=request.getParameter("userid")%>';
     var user_id='11204050220';
	//  var user_id='11412990632';
	   $('body').append(' <input id="user_id" style="display:none" value="'+user_id+'"  />');
	   $('form[name="userid_form"] input:hidden').attr('value',user_id);
	   $('ul.charts_left li a').click(function(){
		   $('form[name="userid_form"]').attr('action',$(this).attr('href'));
		   $('form[name="userid_form"]').submit();
			return false;
	   });
		$.getJSON('/College/report/getReportWeeks',{userid:user_id},function(data){
			 for(var i=0;i<(data.length-1);i++)
			     $('#sign_lselect').append('<option value="'+data[i].select_value+'">'+data[i].select_text+'</option>');
			     paint_select({userid:user_id,weeknum:$('#sign_lselect option:eq(0)').attr('value')},'/College/report/getCourseByOneWeeks');   
			
			 $('#sign_lselect').change(function(){
				  var the_weeknum=$('#sign_lselect option:selected').attr('value');
				  paint_pie('sign_lsign',{userid:user_id,weeknum:the_weeknum},'/College/report/getSignByOneWeeks');
				  paint_rank('sign_lsign',{userid:user_id,weeknum:the_weeknum},'/College/report/getSignRankByOneWeeks');
			
			  });
		});
	
	  function paint_rank(param,url){
		  $.getJSON(url,param,function(data){
		    var str='<span>';
		    $('div.cost_pie span').css('display','inline-block');
		    $('div.cost_pie span.blue_dance').removeClass('blue_dance').addClass('blue_person');
		    $('div.cost_pie span.yellow_dance').removeClass('blue_dance').addClass('yellow_person');
			$('div.cost_pie p').text("本周点名情况在同届同学期同课程其他同学中，排在"+data.RollCallContrast1+"之前");
			var the_rank=parseInt(parseInt(data.RollCallContrast1)/10);
			var $the_node_1;
			if(parseInt(data.RollCallContrast1)%10==0&&the_rank!=0)
				  $the_node_1=$('div.cost_pie span:eq('+(the_rank-1)+')');
			else 
				 $the_node_1=$('div.cost_pie span:eq('+the_rank+')');
		    $the_node_1.attr('class')=='blue_person'? $the_node_1.removeClass('blue_person').addClass('blue_dance')
						 :$the_node_1.removeClass('yellow_person').addClass('yellow_dance');
		    if(data.RollCallContrast2=='100%')
		    	str+='点名情况：您本周<font>'+data.RollCallContrast2+'</font>点名到场，非常积极。';
		    else  if('80%'<=data.RollCallContrast2&&data.RollCallContrast2<='99%')
		    	str+='点名情况：您本周<font>'+data.RollCallContrast2+'</font>点名到场，比较积极。';
		    else  if('60%'<=data.RollCallContrast2&&data.RollCallContrast2<='79%')
		    	str+='点名情况：您本周<font>'+data.RollCallContrast2+'</font>点名到场，积极度一般。';
		    else  if(data.RollCallContrast2<='59%')
		    	str+='点名情况：您本周<font>'+data.RollCallContrast2+'</font>点名到场，很不积极，请注意参加课堂学习。';
		    str+='</span><br/><span>点名对比：本周点名情况在同届同学期同课程其他同学中，排在<font>'+data.RollCallInfo+'</font>之前。</span><br/>';
		    str+='<span>本月涉及科目的点名概率统计：不同课程的点名概率不一样，本周涉及了<font>'+data.nunmber+'</font>门课程，可查询相关课程点名概率。</span>';
			$('div.charts_describe').append(str);	
			});
	   };
	  function paint_pie(id,param,url){
		  $.getJSON(url,param,function(data){
			    var  c = echarts.init($('#'+id)[0], 'macarons');
				c.hideLoading();
				var option = Config('','','').option4(data);
				c.setOption(option, true);
				$(window).resize(function() {
					c.resize();
					c.setOption(option);
				});
		  });
		  
	  };
	  function paint_select(param,url){
		  $('#week_course').empty();
		  $.getJSON(url,param,function(data){
			  if(data.length>0){
				  $('#week_course').prev().css('width','39%');
				  $('#week_course').prev().prev().css('width','30%');
				  $('#week_course').css('width','30%');
				  paint_pie('sign_lsign',{userid:user_id,weeknum:$('#sign_lselect option:eq(0)').attr('value')},'/College/report/getSignByOneWeeks');
			 	  paint_rank({userid:user_id,weeknum:$('#sign_lselect option:eq(0)').attr('value')},'/College/report/getSignRankByOneWeeks');
				  $('#week_course').append('  <h3>本周科目点名概率统计</h3><select id="sign_rselect"></select><div id="sign_rsign"></div>');
				  paint_pie('sign_rsign',{userid:user_id,xkkh:data[0].xkkh,djz:$('#sign_lselect option:eq(0)').attr('value')},'/College/report/getCourseSignByOneWeeks');
				   for(var i=0;i<data.length;i++){
				     $('#sign_rselect').append('<option value="'+data[i].select_value+'">'+data[i].select_text+'</option>');
				  }
				  $('#sign_rselect').change(function(){
					  var $the_option=$('#sign_rselect  option:selected');
					  paint_pie('sign_rsign',{userid:user_id,xkkh:$(this).attr('value'),djz:$('#sign_lselect option:eq(0)').attr('value')},'/College/report/getCourseSignByOneWeeks');
				  });
			  }
			  else{
				  paint_pie('sign_lsign',{userid:user_id,weeknum:$('#sign_lselect option:eq(0)').attr('value')},'/College/report/getSignByOneWeeks');
			  	 paint_rank({userid:user_id,weeknum:$('#sign_lselect option:eq(0)').attr('value')},'/College/report/getSignRankByOneWeeks');
				  $('#week_course').prev().css('width','50%');
				  $('#week_course').prev().prev().css('width','50%');
				  $('#week_course').css('width','0%');
			  }
		  })
	  }
	</script>
</body>
</html>